<template>
  <div class="search-box flexbox flex-align-center">
    <el-input class="input" v-model="input" :placeholder="placeholderText" @keyup.enter.native="done">
      <div slot="suffix" class="flexbox flex-center">
        <div class="clear flexbox flex-center">
          <img
            loading="lazy"
            v-if="input"
            class="clear-icon"
            src="https://cd.sealmg.com/assets/img/clear-icon.png"
            alt="https://cd.sealmg.com/assets/img/clear-icon.png"
            @click="clear"
          />
        </div>
        <div class="line"></div>
        <img
          loading="lazy"
          class="icon pc-icon"
          src="https://cd.sealmg.com/assets/img/search-icon.png"
          alt="https://cd.sealmg.com/assets/img/search-icon.png"
          @click="done"
        />
      </div>
    </el-input>
  </div>
</template>
<script>
  export default {
    props: {
      inputVal: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        input: '',
        placeholderText: this.placeholder || this.$t('formPlaceholder.search')
      }
    },
    watch: {
      inputVal: {
        handler(newVal) {
          this.input = newVal
        },
        deep: true,
        immated: true
      },
      placeholder: {
        handler(newVal) {
          this.placeholderText = newVal
        },
        deep: true,
        immated: true
      }
    },
    computed: {},
    created() {},
    methods: {
      clear() {
        if (this.input) {
          this.input = ''
          // this.$emit('searchClear')
          this.$emit('searchDone', this.input)
        }
      },
      done() {
        this.$emit('searchDone', this.input)
      }
    }
  }
</script>
<style lang="less" scoped>
  .search-box {
    box-sizing: border-box;
    width: 200px;
    height: 32px;
    background: @color-f7;
    border-radius: 23px;
    .input {
      flex: 1;
      /deep/ .el-input__inner {
        padding-right: 70px;
        height: 32px;
        line-height: 32px;
        font-weight: 500;
        font-size: 12px;
        color: @font-color-26;
        border-color: @color-f7;
        background: @color-f7;
        border-radius: 23px;
      }
    }
    /deep/.el-input__inner::placeholder {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #cccccc;
    }
    /deep/ .el-input__inner:focus {
      background: @input-focus-bg;
      border: 1px solid @theme-color;
    }
    /deep/ .el-input__suffix {
      z-index: 5;
      right: 16px;
      .el-input__suffix-inner {
        display: flex;
        align-content: center;
        height: 32px;
      }
    }
    .clear {
      width: 20px;
      height: 20px;
      .clear-icon {
        width: 12px;
        height: 12px;
        cursor: pointer;
      }
    }
    .line {
      margin-left: 6px;
      width: 1px;
      height: 16px;
      background: @color-e5;
    }
    .icon {
      margin-left: 8px;
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
    .pc-icon {
      display: block;
    }
    .mobile-icon {
      display: none;
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .pc-icon {
      display: none;
    }
    .mobile-icon {
      display: block;
    }
  }
  @media screen and (max-width: 767px) {
    .pc-icon {
      display: none;
    }
    .mobile-icon {
      display: block;
    }
  }
</style>
